<template>
  <div class="search_wrapper">
    <div class="header">
      <div class="back" @click="$router.push('/')">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="search">
        <input type="text" placeholder="luckin coffee瑞幸咖啡" />
        <div class="search_btn">搜索</div>
      </div>
    </div>
    <div class="page">
      <div class="page_search">
        <div class="title">历史搜索</div>
        <div class="list">
          <span>汉堡王</span>
          <span>螺蛳粉</span>
          <span>蜜雪冰城</span>
          <span>自助牛肉</span>
          <span>冒烤鸭</span>
        </div>
      </div>
      <div class="page_search">
        <div class="title">搜索发现</div>
        <div class="list">
          <span>自助</span>
          <span>租车</span>
          <span>成都冒菜</span>
          <span>花店</span>
          <span>新鲜牛肉</span>
          <span>麦当劳</span>
          <span>KTV</span>
        </div>
      </div>
      <div class="scroll">
        <div class="scroll_item">
          <div class="scroll_item_title">大家都在搜</div>
          <div class="scroll_item_content">
            <div class="line" v-for="(item,index) in list1" :key="index">
              <span class="count" :style="`color:${index<3?'red':''}`">{{index+1}}</span>
              <span class="name">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="scroll_item">
          <div class="scroll_item_title">美食热搜</div>
          <div class="scroll_item_content">
            <div class="line" v-for="(item,index) in list2" :key="index">
              <span class="count" :style="`color:${index<3?'red':''}`">{{index+1}}</span>
              <span class="name">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="scroll_item">
          <div class="scroll_item_title">玩法热搜</div>
          <div class="scroll_item_content">
            <div class="line" v-for="(item,index) in list3" :key="index">
              <span class="count" :style="`color:${index<3?'red':''}`">{{index+1}}</span>
              <span class="name">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="scroll_item">
          <div class="scroll_item_title">商品热搜</div>
          <div class="scroll_item_content">
            <div class="line" v-for="(item,index) in list4" :key="index">
              <span class="count" :style="`color:${index<3?'red':''}`">{{index+1}}</span>
              <span class="name">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="scroll_item">
          <div class="scroll_item_title">景点热搜</div>
          <div class="scroll_item_content">
            <div class="line" v-for="(item,index) in list5" :key="index">
              <span class="count" :style="`color:${index<3?'red':''}`">{{index+1}}</span>
              <span class="name">{{item}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        "库迪咖啡 11 选1仅7.4",
        "抢瑞幸26元免单",
        "奶茶",
        "蛋糕",
        "烧烤",
        "烤肉",
        "台球",
        "小龙虾",
        "火锅",
        "咖啡"
      ],
      list2: [
        "炸鸡",
        "披萨",
        "汉堡",
        "沙茶面",
        "自助餐",
        "牛排",
        "面包",
        "海鲜自助",
        "肠粉",
        "姜母鸭"
      ],
      list3: [
        "暑期来海昌探秘大海",
        "欢乐暑假玩在银基",
        "健身房",
        "棋牌室",
        "私人影院",
        "微醺酒吧",
        "足浴",
        "咕噜咕噜泡温泉",
        "剧本杀",
        "密室逃脱"
      ],
      list4: [
        "新鲜水果",
        "榴莲",
        "西瓜",
        "新鲜牛肉",
        "火鸡面",
        "助消化酸奶",
        "杨梅",
        "冰鲜荔枝",
        "新鲜果切",
        "鸡蛋"
      ],
      list5: [
        "七彩云南欢乐世界",
        "昆明融创海世界",
        "云南野生动物园",
        "金方森林温泉",
        "小人国主题公园",
        "青鱼湾水上乐园",
        "云南民族村",
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: #f5f5f5;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffff;
  border-radius: 30px;
}

.search input {
  flex: 1;
  outline: none;
  resize: none;
  border: none;
  background: transparent;
  padding: 8px 8px;
}

.search_btn {
  border-radius: 30px;
  padding: 5px 10px;
  background: yellow;
  font-size: 13px;
  margin-right: 4px;
}

.page {
  padding: 0 10px;
}

.title {
  font-size: 14px;
  font-weight: 700;
  margin-top: 14px;
}

.list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 0;
}

.list span {
  background: #f3f0f0;
  padding: 6px 8px;
  border-radius: 16px;
  font-size: 12px;
  margin-bottom: 10px;
  margin-right: 6px;
}

.scroll {
  display: flex;
  margin-top: 10px;
  overflow-x: scroll;
}

.scroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera */
}

.scroll_item {
  display: flex;
  flex-direction: column;
  width: 180px;
  flex-shrink: 0;
  min-height: 350px;
  background: pink;
  border-radius: 8px;
  margin-right: 10px;
  padding: 0 4px 4px;
  box-sizing: border-box;
}

.scroll_item:nth-child(1) {
  background: #fcf0f4;
  .scroll_item_title{
    color: #E03643;
  }
}

.scroll_item:nth-child(2) {
  background: #faeede;
  .scroll_item_title{
    color: #E48031;
  }
}

.scroll_item:nth-child(3) {
  background: #faecfd;
  .scroll_item_title{
    color: #C171E4;
  }
}

.scroll_item:nth-child(4) {
  background: #f2fbe6;
  .scroll_item_title{
    color: #7CCB4A;
  }
}
.scroll_item:nth-child(5) {
  background: #F0F2FE;
  .scroll_item_title{
    color: #678AF0;
    margin-bottom: 16px;
  }
}

.scroll_item_title {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
}

.scroll_item_content {
  background: #fff;
  flex: 1;
  border-radius: 8px;
  padding: 10px;
}
.line {
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  .count {
    margin-right: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #A8A8A8;
  }
  .name {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>